<script setup>
import FormParam from './FormParam.vue'
import { useDark, useToggle } from '@vueuse/core'
import {storeToRefs} from 'pinia'
import { useRouter  } from 'vue-router'
import useUIStore from '@/stores/UI.js'
const router = useRouter()
const UIStore = useUIStore()
const { submitDisabled } = storeToRefs(UIStore)
const isDark = useDark({
  selector: 'body',
  attribute: 'class',
  valueDark: 'dark',
  valueLight: 'light'
})

const toggleDark = useToggle(isDark)
</script>

<template>
  <div class="common-layout">
    <el-header class="my-head">
      <p>M</p>
      <ul style="width: 350px;display: flex;justify-content:space-between">
        <li><el-button type="info" @click="router.replace('/simpleCharts')" :disabled="submitDisabled">SimpleTask</el-button></li>
        <li><el-button type="info" @click="router.replace('/multipleTables')" :disabled="submitDisabled">MultipleTask</el-button></li>
        <li>
          <el-button type="info" @click="toggleDark()" :disabled="submitDisabled">Dark</el-button>
        </li>
      </ul>
    </el-header>
    <el-container class="main-content">
      <el-aside width="50%" style="box-sizing: border-box;">
        <FormParam />
      </el-aside>
      <el-main width="50%" style="box-sizing: border-box">
        <RouterView />
      </el-main>
    </el-container>
  </div>
</template>

<style lang="scss">
.common-layout{
  width: 100vw;
}
.my-head {
  display: flex;
  height: 70px;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;

  p {
    color: white;
    font-size: 30px;
    transform: skew(-10deg);
  }
}

ul {
  list-style: none;
}

.dark {
  background-color: black;
  color: #cccccc;
}
</style>
